{extend name="./app/admin/view/login_tpl.html" /}
{block name="title"}管理员找回密码 - {__block__}{/block}

{block name="style"}
<style type="text/css">
    [v-cloak] {
        display: none;
    }
    .ivu-input-group-append {
        padding:0px!important;
    }
    .ivu-input-group-append img {
        height: 34px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        display: block;
    }
</style>
{/block}
{block name='main'}
<div style="width: 350px;margin: 0 auto!important;padding-top: 100px;">
    <div class="mip-box" v-cloak>
        <div class="mip-box-body">
            <h1 class="text-center login-title">找回密码</h1>
            <i-form ref="form" :model="form" :rules="rules"  label-position="top">
                <Form-item label="手机号" prop="mobile">
                    <i-Input size="large" v-model="form.mobile" placeholder="手机号"></i-Input>
                </Form-item>
                <Form-item label="电子邮箱" prop="email">
                    <i-Input size="large" v-model="form.email" placeholder="电子邮箱"></i-Input>
                </Form-item>
                <Form-item label="验证码" prop="captcha"  >
                    <div>
                        <i-input class="captcha" v-model="form.captcha" size="large" placeholder="4位字符">
                            <template slot="append"><img @click="refreshCaptcha" :src="captchaImg" alt="点击刷新" /></template>
                        </i-input>
                    </div>
                </Form-item>
                <Form-item label="输入密码重置验证码" prop="chgPwdCaptcha">
                    <i-input  v-model="form.chgPwdCaptcha" size="large" placeholder="重置验证码">
                        <template slot="append"><i-button type="button" @click="getChgPwdCaptcha"  alt="点击刷新" >获取密码重置验证码</i-button></template>
                    </i-input>
                </Form-item>

                <Form-item label="新密码" prop="newPassword">
                    <i-Input size="large" v-model="form.newPassword" placeholder="新密码"></i-Input>
                </Form-item>

                <Form-item>
                    <i-Button type="text" onclick="javascript:history.back()">返回</i-Button>
                    <i-Button size="large" type="primary" long @click="submitForm()">保存新密码</i-Button>
                </Form-item>
            </i-form>
        </div>
    </div>


</div>
{/block}
{block name="javascript"}
{__block__}

<script>
    new Vue({
        el: '#app',
        data: {
            captchaImg: '{$mipInfo.domain}/captcha.html',
            form: {
                findType:'email',
                mobile: '',
                email:'',
                captcha: '',
                chgPwdCaptcha:'',
                newPassword: '',
            },
            show: 'login-reg show',
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { length: 25, message: '长度必须为11个数字', trigger: 'blur' }
                ],
                captcha: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                    { min: 4, max: 4, message: '长度为4个字符', trigger: 'blur' }
                ],
            },
        },
        mounted: function mounted() {
        },
        methods: {
            submitForm(formName) {
                let _this = this;

                this.$mip.ajax('{$mipInfo.domain}/user/ApiUserUser/chg_pwd_by_captcha', {
                    chgPwdCaptcha: _this.form.chgPwdCaptcha,
                    newPassword: md5(_this.form.newPassword),
                }).then(res => {
                    if(res.code==1){
                        _this.$Message.success('密码重置成功');
                    }
                });
            },
            refreshCaptcha: function() {
                this.captchaImg = '{$mipInfo.domain}/captcha.html&t='+(new Date()).getTime();
            },
            getChgPwdCaptcha:function(){
                var url="{:url('user/ApiUserUser/send_chgpwdcaptcha')}";
                var d1={'findType':this.form.findType,'mobile':this.form.mobile,'email':this.form.email,'captcha':this.form.captcha};

                let _this= this;
                this.$mip.ajax(url,d1).then(d1r=>{
                    if(d1r.code==1){
                        _this.$Message.success('密码验证码已经成功发出');
                    }else{
                        _this.refreshCaptcha();
                    }
                })
            },
            goto_forget_password:function(){
                location.href="/admin/forget_password";
            },
        }
    })
</script>
{/block}